<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="common.css" rel="stylesheet">
    <script src="vue.min.js"></script>
</head>
<body>
<div id="div1">
    <tag1 msg="msg1"></tag1>
    <tag2 msg="msg2"></tag2><!--prop直接量-->
    <input v-model="msgname">
    <tag3 v-bind:msg="msgname"></tag3><!--用v-bind指定prop的值是变量msgname-->

    <ol>
        <tag4 v-for="item in list" v-bind:itemname="item"></tag4>
    </ol>
</div>

<div id="div2">
    <tag1 msg="msg1"></tag1>
    <tag2 msg="msg2"></tag2><!--可以看到因为tag2是一个局部组件，所以仅能在div1中使用，而div2是另一个vue实例，则不能直接调用div1中定义的组件，而只能调用全局组件tag1-->
</div>


<script>
    //创建全局组件
    Vue.component("tag1",{
        props : ["msg"],//props生命组件可选的属性，然后组件可以在表达式中引用属性值
        template : "<h1>全局定义组件{{msg}}</h1>"
    });
    var vm1 = new Vue({
        el : "#div1",
        data : {
            msgname : "",
            list : [
                {name : "item1"},
                {name : "item2"},
                {name : "item3"}
            ]
        },
        //局部组件
        components : {
            tag2 : {
                props : ["msg"],
                template : "<h2>局部定义组件{{msg}}</h2>"
            },
            tag3 : {
                props : ["msg"],
                template : "<div>prop配合v-bind使用{{msg}}</div>"
            },
            tag4 : {
                props : ["itemname"],
                template : "<li>prop配合v-bind使用在遍历中{{itemname.name}}</li>"
            }
        }
    });

    var vm2 = new Vue({
        el : "#div2",

    })
</script>
</body>
</html>